import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from "react-native";
import {SafeAreaView} from "react-navigation";
import NavigationBar from "./common/NavigationBar";
import Toast from "react-native-root-toast";
import RNRestart from 'react-native-restart';
import {commonStyles} from "../configs/commonStyle";
import {displayName as appName} from '../../app.json';
import NetInfo from "@react-native-community/netinfo";
import navigator from "../utils/navigator";
import {TouchableOpacity} from "react-native-ui-lib";


export default class NetErrorPage extends Component {
    render() {
        return (
            <SafeAreaView style={commonStyles.body}>
                <View style={styles.container}>
                    <NavigationBar
                        title={appName}/>
                    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
                        <Image
                            style={{width: 120, height: 120}}
                            source={require('../images/pic_no_wifi.png')}/>
                        <Text style={{marginTop: 25}}>数据加载失败，可能网络问题～</Text>
                        <TouchableOpacity
                            onPress={() => this._onReload()}>
                            <View style={styles.btn}>
                                <Text style={commonStyles.text_white_14}>
                                    重新加载
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <Text
                            style={{marginTop: 15, color: '#30A1ED', fontSize: 14}}
                            onPress={() => this._onSolution()}>
                            查看解决方案
                        </Text>
                    </View>
                </View>
            </SafeAreaView>
        );
    }

    _onReload() {
        NetInfo.addEventListener(state=>{
            if (!state.isInternetReachable && !state.isConnected) {
                Toast.show('请检查网络连接')
            }
            else{
                RNRestart.Restart();
            }
        });
    }

    _onSolution() {
        navigator.navigate('NetErrorTip');
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    btn: {backgroundColor: '#FF5C25', borderRadius: 8, paddingVertical: 8, paddingHorizontal: 25, marginTop: 40},
});
